<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="hmg.common.CommonUtils"%>
<%@ page import="hmg.vo.BoardVO"%>
<%@ page import="java.util.List"%>
<%-- 
    JSP Name : jspName.jsp
    Description : 설명을 기술합니다.
    author Kim hyung soo
    since 2012. 8. 30.
    version 1.0
    Modification Information
       since          author              description
    ===========    =============    ===========================
    2012. 8. 30.     Kim hyung soo     최초 생성
--%>
<%
    List<BoardVO> imageList = (List<BoardVO>) request.getAttribute("ImageList");
%>
<script type="text/javascript" src="/hmg/js/web/kor/com/googleAnalytics.js"></script>
                <div class="photo_mask"></div>
                <div class="photo_layPop">
                    <p class="btnClose"><a href="#"><img src="/hmg/images/web/kor/mgr/gallery_Slide_Close.png" alt="닫기"/></a></p>

                    <div class="galleryView">
                        <div id="photo_gallery_wrapper">
                            <div id="photo_gallery_slider">
                                <div style="overflow: hidden;" class="photo_gallery_scroll">
                                    <div class="photo_scrollContainer">
                                        <div class="photo_gallery_panel">
<%
    if (imageList == null || imageList.size() == 0)
        out.println("                                            <img src=\"/hmg/images/logo.png\" />");
    else
        out.println("                                            <img src=\"" + imageList.get(0).getURL() + "\" width=\"632\" height=\"368\" border=\"0\" />");
%>
                                        </div>
<%
    if (imageList != null && imageList.size() > 0) {
        for (int idx = 1; idx < imageList.size(); idx++) {
            BoardVO image = imageList.get(idx);
%>
                                        <div class="photo_gallery_panel">
                                            <img src="<%= image.getURL() %>" alt="" />
                                        </div>
<%  
        }
    }
%>
                                    </div>
                                    <div class="photo_gallery_Information">
                                        <p class="categoty"><%= imageList.get(0).getCompName() %></p>
                                        <p class="title" title="<%= imageList.get(0).getRemark() %>" style="width:98%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;"><%= imageList.get(0).getTitle() %></p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div id="galley_thumbImg">
                            <ul>
<% 
    for (int idx = 0; idx < imageList.size(); idx++) {
        BoardVO image = imageList.get(idx);
        String className = "";
            
        if (idx == 0)
            out.println("       <li class=\"on\"><img src=\"" + image.getURL() + "\" alt=\"\" /></li>");
        else if (idx + 1 >= imageList.size())
            out.println("       <li class=\"last\"><img src=\"" + image.getURL() + "\" alt=\"\" /></li>");
        else
            out.println("       <li><img src=\"" + image.getURL() + "\" alt=\"\" /></li>");
    }
%>
                            </ul>
                        </div>
                    </div>
                </div>
<script type="text/javascript">
$(function() {
    var totalPanels = $(".photo_scrollContainer").children().size();
    var movingDistance  = 610;
    var $panels = $('#photo_gallery_slider .photo_scrollContainer > div');
    var $container = $('#photo_gallery_slider .photo_scrollContainer');
    var curPanel = 0;
    var scroll = $('#photo_gallery_slider .photo_gallery_scroll').css('overflow', 'hidden');
    $panels.css({'float' : 'left','position' : 'relative'});
    $container.css({'width': (610* $panels.size()) +'px', 'left':'0px'});
    $("#photo_gallery_slider").data("currentlyMoving", false);

    function change(direction, moveIndex) {
        if((direction && !(curPanel < totalPanels - 1)) || (!direction && (curPanel <= 0))) { return false; }
        if (($("#photo_gallery_slider").data("currentlyMoving") == false)) {
            $("#photo_gallery_slider").data("currentlyMoving", true);
            var next = direction ? curPanel + moveIndex : curPanel - moveIndex;
            var leftValue = $(".photo_scrollContainer").css("left");
            var movement = direction ? parseFloat(leftValue, 10) - (movingDistance * moveIndex) : parseFloat(leftValue, 10) + (movingDistance * moveIndex);
            var curThumb = $("#galley_thumbImg li.on");
            var removeClassEl = direction ? $(curThumb).next() : $(curThumb).prev();
            $(".photo_scrollContainer").stop().animate({"left": movement}, 300, function() {
                $("#photo_gallery_slider").data("currentlyMoving", false);
            });
            $(removeClassEl).addClass("on");
            $(curThumb).removeClass("on");
            curPanel = next;
        }
    }
});
</script>